<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>实现跨域</title>
</head>

<body>
  <input type="button" id="btn" value="获取百度天气数据">
  <table border="1">
    <thead>
      <tr>
        <th>日期</th>
        <th>白天图片</th>
        <th>晚上图片</th>
        <th>温度</th>
        <th>天气情况</th>
        <th>风向</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
  <script src="../assets/js/jquery-1.12.2.js"></script>
  <!-- 第1步引入模板文件 -->
  <script src="../assets/js/template.js"></script>
  <!-- 第2步准备模板 -->
  <script type="text/template" id="weaTmp">
   {{each data as item index}}
   <tr>
    <td>{{item.date}}</td>
    <td><img src="{{item.dayPictureUrl}}"></td>
    <td><img src="{{item.nightPictureUrl}}"></td>
    <td>{{item.temperature}}</td>
    <td>{{item.weatder}}</td>
    <td>{{item.wind}}</td>
  </tr>
   {{/each}}
  </script>
  <script>
  $("#btn").on("click",function () {
     $.ajax({
       type:"get",
       url:"http://api.map.baidu.com/telematics/v3/weather",
       data:{
        location:"大丰",
        output:"json",
        ak:"zVo5SStav7IUiVON0kuCogecm87lonOj"
       },
       dataType:"jsonp",
       success:function (res) {
        //  console.log( res );
        if(res.error==0) {
          var obj={data:res.results[0].weather_data}
          // console.log( obj );
          var htmlStr=template("weaTmp",obj)
          $("tbody").html(htmlStr)
        }
       }
       
     })
  })

  </script>
</body>

</html>